---
type: tutorial
title: 직접 만들어 보기 - 헤더
description: >-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 지금까지 배운 모든 내용을 사용하여 반응형 탐색 기능이 있는 헤더를 구축하세요.
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

여러분의 사이트는 다양한 장치에서 표시되므로 이제 다양한 화면 크기에 반응할 수 있는 페이지 탐색을 만들 차례입니다!

<PreCheck>
  - 탐색 컴포넌트가 포함된 사이트 헤더를 만들기
  - 탐색 컴포넌트를 반응형으로 만들기
</PreCheck>

<Box icon="puzzle-piece">

## 직접 시도해 보기 - 새로운 Header 컴포넌트를 만들어 보세요.

<Steps>
1. 새 헤더 컴포넌트를 만듭니다. `<header>` 요소 내부에 있는 `<nav>` 요소 내에서 기존 `Navigation.astro` 컴포넌트를 가져와 사용합니다.

    <details>
    <summary>코드 확인하기!</summary>

   `src/components/`에 `Header.astro`라는 파일을 만듭니다.
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>

<Box icon="puzzle-piece">

## 직접 시도해 보기 - 페이지 업데이트

<Steps>
1. 각 페이지에서 기존 `<Navigation/>` 컴포넌트를 새 헤더로 바꿉니다.

    <details>
    <summary>코드 확인하기!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Home Page";
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. 브라우저 미리보기를 확인하고 헤더가 모든 페이지에 표시되는지 확인하세요. 아직 달라 보이지는 않지만 개발 도구를 사용하여 미리보기를 검사하면 이제 탐색 링크 주위에 `<header>` 및 `<nav>`와 같은 요소가 있는 것을 볼 수 있습니다.
</Steps>
</Box>

## 반응형 스타일 추가

<Steps>
1. 탐색 링크를 제어하려면 CSS 클래스로 `Navigation.astro`를 업데이트하세요. 기존 네비게이션 링크를 `nav-links` 클래스와 `main-menu` id 속성을 가진 `<div>` 태그로 감싸세요.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div id="main-menu" class="nav-links">
      <a href="/">Home</a>
      <a href="/about/">About</a>
      <a href="/blog/">Blog</a>
    </div>
    ```

2. 아래 CSS 스타일을 `global.css`에 복사하세요. 이러한 스타일은 다음과 같습니다.

    - 모바일용 탐색 링크 스타일 및 위치를 지정합니다.
    - 더 큰 화면 크기에 맞게 다양한 스타일을 정의하려면 `@media` 쿼리를 사용하세요.

    :::tip[모바일 우선 디자인]
    먼저 작은 화면 크기에서 어떤 일이 발생해야 하는지 정의하는 것부터 시작하세요! 화면 크기가 작을수록 더 간단한 레이아웃이 필요합니다. 그런 다음 더 큰 장치에 맞게 스타일을 조정하세요. 복잡한 케이스를 먼저 디자인했다면, 다시 단순하게 만들려고 노력해야 합니다.
    :::

    ```css title="src/styles/global.css" ins={23-60}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* nav 스타일 */

    .nav-links {
      width: 100%;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #0d0950;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
    }
    ```
</Steps>

창 크기를 조정하고 다양한 화면 너비에 적용되는 다양한 스타일을 찾아보세요. 이제 헤더는 `@media` 쿼리를 사용하여 화면 크기에 **반응**합니다.

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] CSS를 사용하여 내 사이트에 반응형 요소를 추가할 수 있습니다.
</Checklist>
</Box>

### 참고 자료

- [컴포넌트 기반 설계](https://www.droptica.com/blog/component-based-design/) <Badge class="neutral-badge" text="외부 링크" />

- [시맨틱 HTML 태그](https://www.dofactory.com/html/semantics) <Badge class="neutral-badge" text="외부 링크" />

- [모바일 우선 디자인](https://www.mobileapps.com/blog/mobile-first-design) <Badge class="neutral-badge" text="외부 링크" />
